<template>
  <div class="supplementaryCard-box content-box">
    <nav-title title="补卡申请" :routerLink="routerLink"/>
    <div class="regulations-box supplementaryCard-content">
      <div v-if="show && (!list || list.length == 0)">
        <p class="supplementaryCard-nodata">亲，这里没有异常数据哦～</p>
      </div>
      <div v-else-if="show" >
        <div class="information" v-for="(item, index) in list" @click="inputChange(index)">
          <input type="checkbox" :checked="checkList[index].checked">
          <div class="info-cell clearfix">
            <label class="label">异常日期</label>
            <div class="value">
              <p>{{item.dateDay}}</p>
            </div>
          </div>
          <div class="info-cell clearfix">
            <label class="label">异常类型</label>
            <div class="value">
              <p>{{item.unusualType}}</p>
            </div>
          </div>
          <div class="info-cell clearfix">
            <label class="label">签到记录</label>
            <div class="value">
              <div class="value" v-for="item in item.signList">
                <p>{{item.signTime}}</p>
              </div>
            </div>
          </div>
          <!-- <div class="supplementaryCard-dividingLine"></div> -->
          <div class="supplementaryCard-interval"></div>
        </div>
        <button @click="supplementaryCardClick">补卡</button>
      </div>
    </div>
  </div>
</template>

<script>
// import { Datetime, Group, PopupRadio, dateFormat } from 'vux';
import { getabsents } from "../../api/api";
import moment from "moment";
import cloneDeep from "lodash/clonedeep";
export default {
  name: "SupplementaryCard",
  components: {
    // Datetime,
    // Group,
    // PopupRadio
  },
  created() {
    // this.approved = this.$route.query.approved;
    this.getData();
  },
  mounted() {},
  data() {
    return {
      show: false,
      routerLink: "",
      list: [
        // {
        //   date: '2018-06-12',
        //   typeName: '旷工',
        //   signInList: ['2018-04-24   08:41', '2018-04-24   22:41', '2018-04-25   00:41']
        // },
        // {
        //   date: '2018-06-13',
        //   typeName: '旷工',
        //   signInList: ['2018-04-24   08:41', '2018-04-24   22:41', '2018-04-25   00:41']
        // }
      ],
      checkList: [],
    };
  },
  methods: {
    getData() {
      this.$vux.loading.show();
      getabsents()
        .then(res => {
          this.show = true;
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.list = res.retData;
            this.list.map((item) => {
              this.checkList.push({
                date: item.dateDay,
                checked: false,
              });
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.show = true;
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    supplementaryCardClick(index) {
      let arr = this.checkList.filter(item => item.checked==true);
      if (arr.length > 0) {
        const dateArr = [];
        arr.map((item)=>{
          dateArr.push(item.date);
        })
        this.$router.push({
          name: "SupplementaryCardDetail",
          query: {
            crdDate: JSON.stringify(dateArr)
          }
        });
      } else {
        this.$vux.alert.show({
          title: "提示",
          content: "最少选择一条异常记录！"
        });
      }
    },
    inputChange(index) {
      if (this.checkList[index].checked) {
        this.checkList[index].checked = false;
      } else {
        this.checkList[index].checked = true;
      }
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
.supplementaryCard-box {
  .supplementaryCard-nodata {
    font-size: 16px;
    margin-top: 60px;
  }
  .supplementaryCard-content {
    .information {
      padding-top: 10px;
      position: relative;
      > input {
        position: absolute;
        right: 20px;
        top: 20px;
      }
      .info-cell {
        .label {
          flex: 1;
          font-weight: bold;
          font-size: 16px;
        }
        .value {
          font-size: 16px;
        }
      }
      .supplementaryCard-dividingLine {
        width: 90%;
        margin: 10px auto;
        height: 1px;
        background-color: #ccc;
      }

      .supplementaryCard-interval {
        width: 100%;
        height: 8px;
        background: #eee;
      }
    }
    button {
      width: 90%;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      font-size: 18px;
      color: #fff;
      outline: none;
      margin: 10px 0 20px;
      background-color: rgba(28, 170, 254, 1);
      font-weight: bold;
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.349019607843137);
      cursor: pointer;
    }
  }
}
</style>
